<template>
	<view class="manner">


		<Top :title='title' :Black="true"></Top>


		<view class="boxs" style="position: fixed;z-index: 9999999;background: #111;">
			<scroll-view class="scroll" :scroll-x="true">
				<view v-for="(item,i) in list" :key='i' class="btn" @click="change(item.id,i)"
					:class="{check:checkid==item.id}">
					{{item.name}}
				</view>
				<view class="btn" style="width:100rpx;"></view>
				<view class="tiao" :style="{left:checkidIndex*160+61+'rpx',}"></view>
			</scroll-view>
			<view class="jian">
				<view class="jianl" :class="{ent:showlx}" @click="showlx=!showlx"></view>
			</view>
		</view>
		<view class="boxs" style="opacity: 0;">
			<scroll-view class="scroll" :scroll-x="true">
				<view v-for="(item,i) in list" :key='i' class="btn" @click="change(item.id,i)"
					:class="{check:checkid==item.id}">
					{{item.name}}
				</view>
				<view class="btn" style="width:100rpx;"></view>
				<view class="tiao" :style="{left:checkidIndex*160+61+'rpx',}"></view>
			</scroll-view>
			<view class="jian">
				<view class="jianl" :class="{ent:showlx}" @click="showlx=!showlx"></view>
			</view>
		</view>
		<view class="lx_box" v-show="showlx">
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item,i) in arrd" :key='i' :class='{check:checkd==item.id}'
					@click="changea(item.id)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item,i) in arrs" :key='i' :class='{check:checkds==item.id}'
					@click="changeas(item.id)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item,i) in arra" :key='i' :class='{check:checkda==item.id}'
					@click="changeaa(item.id)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>




		<view class="imghd">
			<!-- <view class="imgd_box">
				<view class="box_cd" @click="checkEnter(item.id)" v-for="(item,i) in hunlist" :key="i">
					<image class="imgt" style="height:200rpx" :src="item.image_src"></image>
					<view class="named_box">
						<view class="nal">{{item.name}}</view>
						<view class="nar">{{item.wedding_type==1?"样片":'客片'}}</view>
					</view>
					<view class="yans">
						<view class="yanl">
							<view class="kan"></view>
							{{item.view}}
						</view>
						<view class="yanr" @click.stop="good(item,i)">
							<view :class="item.do==1?'dians':'dian'"></view>
							{{item.num}}
						</view>
					</view>
				</view>
			</view> -->
			<zero-waterfall :list="hunlist" type="3" :status="status" styleType="2">
			</zero-waterfall>
		</view>

		<view style="height:160upx;"></view>
		<view class="tabbar">
			<bottomBox :type='type'></bottomBox>
		</view>

	</view>
</template>

<script>
	import bottomBox from '../../components/navBox/bottom.vue'
	import Top from '../../components/navBox/top.vue'
	export default {
		data() {
			return {
				checkidIndex: 0,
				sty: '1',
				title: '',
				checkid: 0,
				type: 'two',
				list: [],
				arrd: [

				],
				checkd: 0,
				arrs: [],
				checkds: 0,
				arra: [

				],
				checkda: 0,
				showlx: false,
				page: 1,
				lastPage: 0,
				hunlist: [],
				status: 0
			}
		},
		components: {
			bottomBox,
			Top
		},
		computed: {

		},
		onLoad() {
			this.title = this.$store.state.shopsname.shopname
			this.getlei();
			this.status = 0;
			this.getshoplist();
		},
		mounted() {

		},
		methods: {
			// 获取顶部分类
			getlei() {
				this.$request({
					url: 'wedding/wedding_type',
					method: 'POST',
					data: {
						shop_id: this.$store.state.shopsname.id,
						show_type: 3, //店铺作品风格这里，只需要显示摄影 风格
					}
				}).then(res => {
					if (res.statusCode == 200) {
						this.list = res.data.data.type
						this.arrd = res.data.data.type[0].next
						this.arrs = res.data.data.wedding_show
						this.arra = res.data.data.wedding_type
					}
				})
			},
			// 获取列表
			getshoplist() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: 'wedding/wedding_show',
					method: 'POST',
					data: {
						show_type: 3,
						page: this.page,
						work_id: 0, //老师
						shop_id: this.$store.state.shopsname.id,
						type_p_id: this.checkid ? this.checkid : 0,
						type_id: this.checkd ? this.checkd : 0,
						wedding_show: this.checkds ? this.checkds : 0,
						wedding_type: this.checkda ? this.checkda : 0,
						user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0
					},
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page == 1) {
							this.hunlist = res.data.data.data;
						} else {
							this.hunlist.push(...res.data.data.data);
						}
						this.lastPage = res.data.data.last_page;
						uni.hideLoading()
					} else {
						this.$wanlshop.msg(res.data.msg);
						uni.hideLoading()
					}
				})
			},
			// 点击第一行选项
			change(e, index) {
				this.checkid = e;
				this.arrd = this.list[index].next;
				this.checkidIndex = index;
				this.checkd = 0;
				this.checkds = 0;
				this.checkda = 0;
				this.status = 1;
				this.page = 1;
				this.getshoplist();
			},
			// 点击第二行选项
			changea(e) {
				this.checkd = e;
				this.status = 1;
				this.page = 1;
				this.getshoplist();
			},
			// 点击第三行选项
			changeas(e) {
				this.checkds = e;
				this.status = 1;
				this.page = 1;
				this.getshoplist();
			},
			// 点击第四行选项
			changeaa(e) {
				this.checkda = e;
				this.status = 1;
				this.page = 1;
				this.getshoplist();
			},
			onReachBottom() {
				if (this.page < this.lastPage) {
					this.status = 0;
					this.page++;
					this.getshoplist();
				} else {
					this.$wanlshop.msg('我是有底线的!');
				}
			}
		}
	}
</script>
<style>
	page {
		background: #111;
	}
</style>
<style scoped lang="scss">
	.tabbar {
		position: absolute;
	}

	.manner {
	}

	.boxs {
		position: relative;
		width: 100%;

		.jian {
			position: absolute;
			background: #111;
			width: 82rpx;
			height: 100rpx;
			right: 0;
			top: 0;

			.jianl {
				background: url(../../static/manner/jian.png)no-repeat center;
				background-size: 100%;
				width: 40rpx;
				height: 40rpx;
				margin-top: 30rpx;
				transition: all 0.5s;
				transform: rotateZ(180deg);

				&.ent {
					transform: rotateZ(360deg);
				}
			}
		}
	}

	.scroll {
		width: 750upx;
		white-space: nowrap;
		position: relative;
		border-bottom: 2rpx solid #2C2D2F;
		height: 100rpx;

		.tiao {
			position: absolute;
			width: 38rpx;
			height: 4rpx;
			background: #F9E8BE;
			bottom: 60rpx;
			transition: all 0.5s;

		}

		.btn {
			display: inline-block;
			color: #fff;
			width: 160rpx;
			text-align: center;
			color: #999;
			font-size: 32rpx;
			line-height: 100rpx;

			&.check {
				color: #F9E8BE;
			}
		}
	}

	.lx_box {
		width: 690rpx;
		margin: 0 auto;

		.lx_scroll {
			white-space: nowrap;
			margin-top: 24rpx;

			.lx_btn {
				display: inline-block;
				color: #666666;
				font-size: 26rpx;
				margin-right: 56rpx;

				&.check {
					color: #F9E8BE;
				}
			}
		}
	}

	.imghd {
		margin-top: 30rpx;

	}

	.imgd_box {
		width: 690rpx;
		margin: 0 auto;
		column-count: 2;

		.box_cd {
			background: #161616;
			border-radius: 8rpx;
			padding-bottom: 24rpx;
			width: 336rpx;
			margin-bottom: 14rpx;
			break-inside: avoid-column;

			.imgt {
				width: 100%;
				min-height: 100rpx;
				display: block;
			}

			.named_box {
				width: 300rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.nal {
					color: #fff;
					font-size: 28rpx;
				}

				.nar {
					width: 60rpx;
					height: 36rpx;
					background: rgba(235, 190, 135, 0.1);
					border-radius: 4rpx;
					text-align: center;
					line-height: 36rpx;
					color: #EBBE87;
					font-size: 20rpx;
				}
			}

			.yans {
				width: 300rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				margin-top: 18rpx;

				.yanl {
					color: #999;
					font-size: 22rpx;

					.kan {
						width: 32rpx;
						height: 32rpx;
						background: url(../../static/manner/yan.png)no-repeat center;
						background-size: 100%;
						display: inline-block;
						vertical-align: middle;
						margin-top: -4rpx;
						margin-right: 4rpx;
					}
				}

				.yanr {
					color: #999;
					font-size: 22rpx;

					.dian {
						width: 32rpx;
						height: 32rpx;
						background: url(../../static/manner/dian.png)no-repeat center;
						background-size: 100%;
						display: inline-block;
						vertical-align: middle;
						margin-top: -6rpx;
						margin-right: 4rpx;

					}

					.dians {
						background: url(../../static/manner/dians.png)no-repeat center;
						background-size: 100%;
						color: #EBBE87;
						width: 32rpx;
						height: 32rpx;
						display: inline-block;
						vertical-align: middle;
						margin-top: -6rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
</style>